{extend name="main"}
{block name="style"}
<style lang="scss">
    /* element滚动条组件 隐藏水平滚动条 */
    .el-scrollbar__wrap {
        overflow-x: hidden;
    }
</style>
{/block}
{block name="body"}

<el-dialog
        title="提示"
        :visible.sync="dialogVisibleTagGroup"
        width="27%"
        :before-close="handleClose" center>
    <el-form ref="form" :model="form" label-width="130px" @submit.native.prevent="submitForm"  ref="form" >
        <el-form-item label="标签组名称" hide-required-asterisk>
            <el-input v-model="form.name"
                      maxlength="15"
                      type="text"
                      show-word-limit
                      style="width:70%;" ></el-input>
        </el-form-item>

        <el-form-item  label="标签" prop="tagsItem"  class="infinite-list"  >
            <div style="max-height:350px;overflow: auto;" >
            <div v-for="(item,i) in form.tagsItem" >
            <el-input  v-model="item.name"
                      maxlength="15"
                      type="text"
                      show-word-limit
                      style="width:70%;" class="my-2"></el-input>
                <el-button type="text"  @click="delItemData(i)">删除</el-button>
            </div>
            </div>
            <el-form-item>
                <el-button type="text" icon="el-icon-circle-plus-outline" @click="addItemData">添加标签</el-button>
            </el-form-item>

        </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleTagGroup = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('form')">确 定</el-button>
  </span>
</el-dialog>
<div class="bg-white p-3">
    <div class="my-3">
        <el-button type="primary" @click="dialogVisibleTagGroup = true">添加标签组</el-button>
        <el-button @click="pullData">刷新数据</el-button>
    </div>
    <span v-if="tableData.length<1"> 暂无数据</span>
    <el-card class="box-card my-3" v-for="(v,i) in tableData">
        <div slot="header" class="clearfix">
            <span>{{v.name}}</span>
            <el-button type="danger" size="mini"  style="float: right;margin-right: 3px;" @click="delTagGroup(v.group_id)" >删除</el-button>
            <el-button type="primary" size="mini"  style="float: right;margin-right: 5px; " @click="modifyTags(v)" >编辑</el-button>
        </div>
        <el-tag  v-for="vo in v.tags" :key="vo.id" class="m-2" v-if="vo.name!=''">{{vo.name}}</el-tag>
        <el-input v-model="input"
                  maxlength="15"
                  type="text"
                  size="small"
                  show-word-limit
                  style="width:200px;"
                  @blur="addTag(event,v)"
                  v-if="showAddTag&&addIndex==i"
        v-focus ></el-input>
        <el-button plain size="mini" icon="el-icon-plus" @click="addTagShow(i)">添加标签</el-button>
    </el-card>
</div>
{/block}
{block name="script"}
{js href="__PLUGIN_SRC__/Clipboard/clipboard.min.js"}
<script>
    const baseView = { view: XYBase.view }
    const vm = new Vue({
        el: '#app',
        directives: {
            //注册一个局部的自定义指令 v-focus
            focus: {
                // 指令的定义
                inserted: function (el) {
                    // 聚焦元素
                    el.querySelector('input').focus()
                }
            }
        },

        data() {
            return {
                /*使用展开运算符导入页面必须配置(不然全写在vm里太啰嗦了)*/
                ...baseView,
                dialogVisibleTagGroup:false,
                tableData: [],
                //是否显示添加标签的输入框
                showAddTag:false,
                input:'',
                addIndex:false,
                form:{
                    name:'',
                    tagsItem:[{name:""}]
                },
                isModify:false
            }
        },
        methods: {
            //刷新数据
            pullData(){
                let _this = this
                $.ajax({
                    url:'/work-wechat/pullTagData',
                    type: 'post',
                    dataType: 'json',
                    success(res) {
                        if (res.code != undefined && res.code == 0) {
                            _this.tableData = res.data
                            XYBase.success('刷新成功')
                        } else if (res.msg != undefined) {
                            XYBase.msg(res.msg)
                        }
                    },
                    error(xhr) {
                        XYBase.error(XYBase.config.system_network_error)
                        // console.log(xhr)
                    },
                });
            },
            //点击添加标签按钮
            addTagShow(index){
                // this.showAddTag=!this.showAddTag
                this.showAddTag = true
                this.addIndex = index
                // this.input='';
            },

            //添加标签的方法
            addTag(event,group){
                let value=event.target.value;
                if (value=="" || value==undefined || value.length<1){
                    this.showAddTag=!this.showAddTag
                    this.input='';
                    return;
                }
                let _this = this
                $.ajax({
                    url:'/work-wechat/addTagForTagGroup',
                    type: 'post',
                    data:{name:event.target.value,group_id:group.group_id,tagGroupId:group.id},
                    dataType: 'json',
                    success(res) {
                        console.log(res)
                        if (res.code != undefined && res.code == 0) {
                            _this.tableData = res.data
                            _this.showAddTag=false
                            _this.input='';
                            XYBase.success('添加成功')
                        } else if (res.msg != undefined) {
                            XYBase.msg(res.msg)
                        }
                    },
                    error(xhr) {
                        XYBase.error(XYBase.config.system_network_error)
                        // console.log(xhr)
                    },
                });
            },
            //添加标签组弹窗的关闭
            handleClose(done) {
                done();
            },
            //添加标签分组时添加标签按钮
            addItemData(){
                this.form.tagsItem.push({name:""})
            },
            delItemData(index){
                this.form.tagsItem.splice(index,1);
            },
            //添加标签分组
            submitForm(){
                var _this=this;
                var D=_this.form;
                if (D.tagsItem.length<1){
                    XYBase.error("请至少添加一组标签")
                    return;
                }
                let url='/work-wechat/addTagGroup';
                if (_this.isModify==true)
                    url='/work-wechat/modifyTagOrGroup';
                $.ajax({
                    url:url,
                    type: 'post',
                    data:D,
                    dataType: 'json',
                    success(res) {
                        console.log(res)
                        if (res.code != undefined && res.code == 0) {
                            _this.tableData = res.data
                            _this.dialogVisibleTagGroup=!_this.dialogVisibleTagGroup
                            _this.form.tagsItem=[{name:""}]
                            _this.form.name=""
                            if (_this.isModify==true){
                                _this.isModify==false;
                                _this.pullData();
                            }
                            XYBase.success(res.msg)
                        } else if (res.msg != undefined) {
                            XYBase.msg(res.msg)
                        }
                    },
                    error(xhr) {
                        XYBase.error(XYBase.config.system_network_error)
                        // console.log(xhr)
                    },
                });
            },
            //删除标签分组
            delTagGroup(group_id){
                var _this=this;
                _this.$confirm('\n' + '删除该分组会同时删除分组下所有的标签，是否继续?', '操作提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.ajax({
                            url:'/work-wechat/delTagGroup',
                            type: 'post',
                            data:{group_id},
                            dataType: 'json',
                            success(res) {
                                if (res.code != undefined && res.code == 0) {
                                    _this.tableData = res.data
                                    XYBase.success('删除分组成功')
                                } else if (res.msg != undefined) {
                                    XYBase.msg(res.msg)
                                }
                            },
                            error(xhr) {
                                XYBase.error(XYBase.config.system_network_error)
                                // console.log(xhr)
                            },
                        });
                    });

            },
            //编辑标签
            modifyTags(group){
                   _this=this;
                   _this.dialogVisibleTagGroup=true;
                   _this.form.name=group.name
                   _this.form.groupId=group.id
                   _this.form.tagsItem=group.tags
                   _this.isModify=true;
            },
            initHtml() {
                let _this = this
                let msg = ''


                $.ajax({
                    url: '',
                    data: _this.search,
                    type:'post',
                    dataType:'json',
                    success(res) {
                        if (res.code != undefined && res.code == 0) {
                            _this.tableData = res.data
                            if (_this.tableData.length < 1) {
                                XYBase.msg('暂无数据~')
                            } else {
                                // XYBase.success('获取成功')
                            }
                        } else if (res.msg != undefined) {
                            XYBase.msg(res.msg)
                        }
                    },
                    error(xhr) {
                        XYBase.error(XYBase.config.system_network_error)
                        console.log(xhr)
                    }
                })
            }
        },
        created() {
            this.initHtml()
            XYBase.created(this)
        },
    })
</script>
{/block}